<template>
	<div id="ChalkOrder" :style="{minHeight: currHeight + 'px'}">
		<!-- 头部导航条 -->
		<div class="top_">
			<van-nav-bar title="粉笔订单" left-text="返回" left-arrow
			     @click-left="onClickLeft"
			     @click-right="onClickRight"
			>
			<template #right>
			    <van-icon name="ellipsis" size="18" />
			</template>
			</van-nav-bar>
		</div>
		<!-- 头部标签 -->
		<div class="count">

		
		<van-tabs title-active-color="#000000" title-inactive-color	="#c7b7bc" color="#0055ff"	@click="onClick">
		  <van-tab title="一级粉比">
			   
			  <div class="order">
				  
				  <div class="message"
				  v-for="(item,index) in lists"
				   :key="index">
				   <div class="list">{{item.index}}</div>
				   <img src="../assets/images/个人信息/个人信息(绑定手机）狮子_03.png">
					 <div class="label">
						 <div>昵称</div>
						 <div>消费金额</div>
					 </div>
					 <div class="data">
						<div class="name">{{item.name}}</div>
						<div class="price">{{item.price}}</div>
					 </div>
					 
					   
				  </div>
			  </div>
			  
			  
		  </van-tab>
		  <van-tab title="二级粉比">
			    <div class="order">
				  
				  <div class="message"
				  v-for="(item,index) in lists"
				   :key="index">
				   <div class="list">{{item.index}}</div>
				   <img src="../assets/images/个人信息/个人信息(绑定手机）狮子_03.png">
					 <div class="label">
						 <div>昵称</div>
						 <div>消费金额</div>
					 </div>
					 <div class="data">
						<div class="name">{{item.name}}</div>
						<div class="price">{{item.price}}</div>
					 </div>
					 
					   
				  </div>
			  </div>
			  
		  </van-tab>
		</van-tabs>
		
		</div>
	</div>
	
	
</template>

<script>
	export default {
	  data() {
	    return {
		  currHeight:'',
	      active: 2,
		  lists:[{
			 index:1,
			 name:"董大伟",
			 price:"￥100000",
		  },
		  {
			  index:2,
			  name:"董大伟",
			  price:"￥100000",
			  }
		  ]
	    };
	  },
	  methods: {
	     onClickLeft() {
			 
    	  this.$router.go(-1)
	     },
	     onClickRight() {
			 

	     },
		 onClick(name, title) {
			 // this.$toast('点击提示')
		},
	   },
		mounted(){
		    this.currHeight = document.documentElement.clientHeight
		    window.onresize = () => {
		        this.currHeight = document.documentElement.clientHeight
		    }
		}
	};
</script>

<style scoped lang="less">

.count{
	padding-top: 90px;
}
	.order{
		margin-top: 50px;
		// background-color:#F3F4F6;
		width:100% ;
		height:1000px;
		overflow: hidden;
		box-sizing: border-box;
		padding-top: 40px;
	}
	.message{
		width: 100%;
		height:157px;
		background-color:#ffffff;
		box-sizing: border-box;
		padding-left: 8.28%;
		padding-right: 8.28%;
		padding-top: 4.6%;
		display: flex;
		justify-content: space-between;
		img{
			height: 106px;
		}
		.list{
			margin-top: 20px;
			width: 8px;
			height: 23px;
			font-size: 30px;
			font-family: HiraginoSansGB;
			font-weight: normal;
			color: #999999;
			line-height: 37px;
		}
		.label{
			div{
				font-size: 24px;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #999999;
				line-height: 37px;
				margin-bottom: 10px;
				margin-top: 5px;
			}
		}
		.data{
			margin-right: 20px;
			.name{
				font-size: 24px;
				text-align: right;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #333333;
				line-height: 37px;
				margin-bottom: 10px;
				margin-top: 5px;
			}
			.price{
				margin-bottom: 10px;
				margin-top: 5px;
				font-size: 24px;
				text-align: right;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #234497;
				line-height: 37px;
			}
		}
	}
	
</style>
